<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<!-- 使用谷歌或者IE最高版本内核渲染 -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
	/>
	<!-- 页面宽度为设备的宽度，原始/缩放/最大/最小比例均为1.0，不允许用户缩放 -->
	<title>Document</title>
	<link rel="stylesheet" href="stylesheets/style.css">

</head>

<body style="margin: 10px;">
	<div>
		<div>
			<label for="username">帐号：</label>
			<input type="text" id="username">
		</div>
		<p>&nbsp;</p>
		<div>
			<label for="paassword">密码：</label>
			<input type="text" id="paassword">
		</div>
		<div style="margin-top: 10px">
			<button id="signup">注册</button>
			<button id="signin">登录</button>
		</div>

		<div style="margin-top: 10px">
			<button id="tokencheck">验证</button>
		</div>

		<br>

		<!-- <div>
			<div>
				<label>
					标题
					<input name="articalTitle" type="text" id="title" />
				</label>
			</div>
			<div>
				<p>分类</p>
				<label>
					<input name="articalType" type="radio" value="life" checked="checked" />生活 </label>
				<label>
					<input name="articalType" type="radio" value="tech" />科技 </label>
				<label>
					<input name="articalType" type="radio" value="sport" />体育 </label>
			</div>
			<div>
				<p>文章封面</p>
				<input name="articalCover" type="text" id="cover">
			</div>
			<div>
				<p>标签</p>
				<input name="articalTag" type="text" id="tag">
			</div>
			<div>
				<p>文章内容</p>
				<div id="editor"></div>
			</div>
			<div style="margin-top: 10px">
				<button id="articalUpload">文章上传</button>
				<button id="articalReset">清空</button>
			</div>
			<button id="setText">设置文本</button>
		</div>

		<input type="file" name="fulAvatar" id="file_upload" value="" class="form-control" placeholder="图片地址" onchange="uploadByForm();"> -->

		<img id="img" src="" alt="">

		<div>
			<div id="captcha"></div>
			<input type="text" id="captcha_input">
			<button id="captcha_btn">验证码检测</button>
		</div>


	</div>
	<script src="./javascript/wangEditor.min.js"></script>
	<script src="ajax.js"></script>
	<script src="index.js"></script>
	<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script>
		var oImage = document.getElementById('img');

		function uploadByForm() {
			//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
			var formData = new FormData();
			var fileObj = document.getElementById("file_upload").files[0];
			formData.append('fulAvatar', fileObj);

			var url = 'http://127.0.0.1:8888/file/upload_avatar';
			$.ajax({
				url: url,
				type: 'POST',
				data: formData,
				headers: {
					token: sessionStorage.getItem('token')
				},

				/**
				 * 必须false才会避开jQuery对 formdata 的默认处理
				 * XMLHttpRequest会对 formdata 进行正确的处理
				 */
				processData: false,
				/**
				 *必须false才会自动加上正确的Content-Type
				 */
				contentType: false,
				success: function (res) {
					setTimeout(() => {
						console.log(res.data.fileUrl);
						oImage.setAttribute('src', res.data.fileUrl);
						// $("#img").attr({
						// 	"src": res.data.fileUrl
						// }).appendTo($("body"));
					}, 1000);
				},
				error: function (responseStr) {
					alert(responseStr.newPath);
				}
			});
		}
	</script>
</body>

</html>